<script setup lang="ts">
import {reactive, ref} from "vue";
import {getProductList, UpdateState} from "@/api/product";

defineOptions({
  name: "Product"
});

const form = reactive({
  name: ""
});
const formRef = ref();
const dataList = ref([]);
const loading = ref(true);

async function onSearch() {
  loading.value = true;
  getProductList({current: dataList.value.current, name: form.name}).then(res=>{
    console.log(res.data);
    dataList.value = res.data.data;
    setTimeout(() => {
      loading.value = false;
    }, 1000);
  })
}
const handleChangeCurrent = (val:any)=>{
  dataList.value.current = val;
  onSearch();
}

const resetForm = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  onSearch();
};
onSearch();
const updateState = (id:number, state:any, status:any) => {
  console.log(`Updating state for product with id: ${id}, state: ${state}, to status: ${status}`);
  UpdateState({id: id, [state]: status})
}
</script>

<template>
  <div class="main">
    <el-form
        ref="formRef"
        :inline="true"
        :model="form"
        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item label="商品名称：" prop="name">
        <el-input
            v-model="form.name"
            placeholder="请输入商品名称"
            clearable
            class="!w-[180px]"
        />
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            :loading="loading"
            @click="onSearch"
        >
          搜索
        </el-button>
        <el-button @click="resetForm(formRef)">
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList.records" table-layout="fixed">
      <el-table-column prop="id" label="ID"/>
      <el-table-column label="商品图">
        <template #default="scope">
          <el-image :src="scope.row.image" error="图片失效"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名"/>
      <el-table-column prop="price" label="价格"/>
      <el-table-column prop="stock" label="库存"/>
      <el-table-column prop="created" label="添加时间"/>
      <el-table-column prop="updated" label="最后更新"/>
      <el-table-column label="快速操作">
        <template #default="scope">
          <div>
            在售：<el-switch :loading="loading" v-model="scope.row.isOnSale" @change="updateState(scope.row.id, 'isOnSale', scope.row.isOnSale)"></el-switch>
            <el-divider direction="vertical"></el-divider>
            新产品：<el-switch :loading="loading" v-model="scope.row.isNew"  @change="updateState(scope.row.id, 'isNew', scope.row.isNew)"></el-switch>
          </div>
          <div>
            热门：<el-switch :loading="loading" v-model="scope.row.isHot"  @change="updateState(scope.row.id, 'isHot', scope.row.isHot)"></el-switch>
            <el-divider direction="vertical"></el-divider>
            置顶：<el-switch :loading="loading" v-model="scope.row.isTop"  @change="updateState(scope.row.id, 'isTop', scope.row.isTop)"></el-switch>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%">
      <el-pagination
          style="float: right"
          background
          layout="prev, pager, next"
          :total="dataList.total"
          :page-size="dataList.size"
          @current-change="handleChangeCurrent"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>